
<template>
<table border="1px">
  <tr>
    <td>照片</td>
    <td><img :src="person.imgUrl" alt="" width="200px"></td>
  </tr>
  <tr>
    <td>姓名</td>
    <td>{{person.name}}</td>
  </tr>
  <tr>
    <td>年龄</td>
    <td>{{person.age}}</td>
  </tr>
  <tr>
    <td>好友</td>
    <td>
      <ul>
        <li  v-for="item in person.friend">{{item}}</li>
      </ul>
    </td>
  </tr>
</table>
  <button @click="loading">点我加载数据</button>
</template>

<script setup>
  import {ref} from "vue";

  const person = ref({
    name:'',
    age:'',
    imgUrl:'',
    friend :[]
  })

  const loading = ()=>{
    person.value={
      name:'范传奇',
      age: '33',
      imgUrl: 'imgs/fcq.jpg',
      friend: ['11','22','33'],
    }

  }


</script>

<style scoped>

</style>